<template>
  <div>
    <van-nav-bar title="创建订单" left-text="返回" @click-left="onClickLeft" left-arrow>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <el-card class="box-card">
      <van-row>
        <van-contact-card type="edit" :name="currentContact.name" :tel="currentContact.tel" />
      </van-row>
    </el-card>
    <div v-for="(item,index) in goods " :key="index">
      <van-card :num="item.goodsNum" :price="item.goodsPrice" :desc="item.goodsInfo" :title="item.goodsName"
        :thumb="baseUrl+item.image">
      </van-card>
    </div>
    <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
    <!-- 优惠券列表 -->
    <van-popup v-model="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
      <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
        @change="onChange" @exchange="onExchange" />
    </van-popup>
    <div style="margin:0 15px 0px 15px">
      <el-row>
        <el-col :span="12">
          <span style="font-size:14px">商品总价</span>
        </el-col>
        <el-col :span="12" style="text-align:right">
          <span style="color:#000;font-size:16px">￥{{totalPrice}}</span>
        </el-col>
      </el-row>
      <el-row style="margin-top:20px">
        <el-col :span="12">
          <span style="font-size:14px">优惠</span>
        </el-col>
        <el-col :span="12" style="text-align:right">
          <span style="color:rgb(182, 182, 182);font-size:14px">优惠还没写</span>
        </el-col>
      </el-row>
      <el-row style="margin-top:20px">
        <el-col :span="12">
          <span style="font-size:14px">运费</span>
        </el-col>
        <el-col :span="12" style="text-align:right">
          <span style="color:rgb(182, 182, 182);font-size:14px">包邮</span>
        </el-col>
      </el-row>
      <el-row style="margin-top:20px">
        <el-col :span="12">
          <span style="font-size:14px;line-height:40px">备注</span>
        </el-col>
        <el-col :span="12" style="text-align:right">
          <van-field v-model="del" placeholder="请输入备注" />
        </el-col>
      </el-row>
      <van-radio-group v-model="radio" style="margin-bottom:50px">
        <van-cell-group>
          <van-cell title="余额支付" clickable @click="radio = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="微信支付" clickable @click="radio = '2'">
            <template #right-icon>
              <van-radio name="2" disabled />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
    <van-submit-bar :price="totalPrice*100" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>
<script>
import { getMember } from "@/api/member/member"
import { addOrder } from "@/api/order/order"
import { Toast } from 'vant';
import Vue from 'vue';
import { CouponCell, CouponList } from 'vant';
Vue.use(CouponCell);
Vue.use(CouponList);
// 假的，后端没写
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元',
};
export default {
  data () {
    return {
      // 总价
      totalPrice: 0,
      currentContact: {
        name: '张三',
        tel: '13000000000',
      },
      goods: [],
      userInfo: [],
      id: '',
      userId: '',
      radio: '',
      del: '',
      showList: false,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      form: {
        orderId: null,
        userId: null,
        goodsId: null,
        createTime: null,
        userName: null,
        userAddress: null,
        goodsImage: null,
        totalPrice: null,
        status: null
      }
    }
  },
  created: function () {
    this.result = this.$route.params.orderList
    this.id = this.$route.params.id
    this.userId = JSON.parse(localStorage.getItem("userInfo")).id
    if (this.userInfo == null) {
      this.$router.push("/login")
    } else {
      getMember(this.userId).then(res => {
        this.userInfo = res.data
      })
      this.getOrder()
    }
  },
  methods: {
    getOrder () {
      if (this.result == null || undefined) {
        this.goods = JSON.parse(localStorage.getItem("orderInfo"))
        this.goods.map(item => {
          if (item.goodsNum == null || undefined) {
            this.totalPrice = item.goodsPrice * 1
          } else {
            this.totalPrice += item.goodsPrice * item.goodsNum
          }
        })
      } else {
        this.goods = this.$route.params.orderList
        localStorage["orderInfo"] = JSON.stringify(this.goods);
        this.goods.map(item => {
          if (item.goodsNum == null || undefined) {
            this.totalPrice = item.goodsPrice * 1
          } else {
            this.totalPrice += item.goodsPrice * item.goodsNum
          }
        })
      }
    },
    //提交订单
    onSubmit () {
      //   this.form.userId = this.userInfo.id
      //   this.form.goodsId = this.goods.id
      //   this.form.goodsImage = this.goods.image
      this.form.status = 1
      this.form.createTime = Date.now()
      this.form.orderId = Date.now()
      //   this.form.totalPrice = this.goods.goodsPrice
      this.form.userName = this.userInfo.username
      addOrder(this.form).then(res => {
        Toast.loading({
          message: '正在支付...',
          forbidClick: true,
        });
        setTimeout(() => {
          Toast.clear();
          Toast.success('支付成功');
          this.$router.push('/successOrder')
        }, 2000);
      })
    },
    onChange (index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange (code) {
      this.coupons.push(coupon);
    },
    onClickLeft () {
      this.$router.go(-1);
    },
  }
}
</script>
<style scoped>
</style>